<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>demo28-查看/修改/删除</title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <style type="text/css">

    </style>
</head>
<body>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">员工信息</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">姓名</label>
                            <div class="col-sm-10">
                                <p class="form-control-static">ccc</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">年龄</label>
                            <div class="col-sm-10">
                                <p class="form-control-static">ccc</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">职位</label>
                            <div class="col-sm-10">
                                <p class="form-control-static">ccc</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">工资</label>
                            <div class="col-sm-10">
                                <p class="form-control-static">ccc</p>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer hide">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <table id="table" class="table table-hover">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>职位</th>
            <th>工资</th>
            <th>操作</th>
        </tr>

        <tr>
            <td>张三</td>
            <td>23</td>
            <td>前端开发</td>
            <td>6000</td>
            <td><a href="#" class="view">查看</a>&nbsp;<a href="#" class="modify">修改</a>&nbsp;<a href="#" class="delete">删除</a></td>
        </tr>

        <tr>
            <td>李四</td>
            <td>28</td>
            <td>java开发</td>
            <td>8000</td>
            <td><a href="#" class="view">查看</a>&nbsp;<a href="#" class="modify">修改</a>&nbsp;<a href="#" class="delete">删除</a></td>
        </tr>

        <tr>
            <td>王五</td>
            <td>26</td>
            <td>java资深开发</td>
            <td>12000</td>
            <td><a href="#" class="view">查看</a>&nbsp;<a href="#" class="modify">修改</a>&nbsp;<a href="#" class="delete">删除</a></td>
        </tr>
    </table>
</body>
</html>

<script>
    $('.view').click(function () {
        var valArr = [];
        $(this).parent().siblings().each(function () {
            valArr.push($(this).text())
        });

        $('#myModal').find('form').children().each(function (i) {
            $(this).find('.form-control-static').text(valArr[i]);
        })
        $('#myModal').modal('show');
    })


    $('.delete').click(function () {
        $(this).parents('tr').remove();
    })

</script>